<template>
	<view>
		<view class="name">{{details.name}}</view>
		<image :src="details.img" mode="" class="pic"></image>
		你当前距离{{details.name}}有{{dis}}km
		<button style="width: fit-content;" @tap="setLine">到{{details.name}}去</button>
		<view class="intor">{{details.intor}}</view>
	</view>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref } from "vue";
	import { CONFIG } from "../../utils/config";
	import { getMapDistance } from "../../utils/tools.js";
	import { userStore } from "../../store/userStore.js"
	
	const store = userStore()
	onLoad((data)=>{
		console.log(data.id)
		getDetails((data.id))
	})
	
	let details = ref({})
	let dis = ref()
	async function getDetails(id){
		let res = await uni.$get(CONFIG.leanCloud_url+"/1.1/classes/SecicItem/"+id)
		if(res.statusCode==200){
			// console.log(res)
			details.value=res.data
			console.log(store.currentPos)
			console.log(details.value.lon,details.value.lat)
			dis.value = getMapDistance(details.value.lat,details.value.lon,store.currentPos.latitude,store.currentPos.longitude)
			
		}
	}
	
	function setLine(){
		uni.navigateTo({
			url:`/pages/playWebView/playWebView?slat=${store.currentPos.latitude}&slat=${store.
			currentPos.longitude}&slat=${details.value.lat}&slat=${details.value.lon}
			`
		})
	}
</script>

<style lang="scss" scoped>
	.name{
		text-align: center;
		font-size: 35rpx;
		margin-top: 10px;
	}
	.pic{
		width: 100%;
	}
</style>
